<template>
  <div class="table-wrapper">
    <el-input placeholder="请输入索书号进行搜索" v-model="input3" class="input-with-select">
      <el-button slot="append" icon="el-icon-search"></el-button>
    </el-input>
    <el-table :data="tableData" border style="width: 100%;color: black">
      <el-table-column prop="account" label="索书号" fixed width="150px">
        <template slot-scope="scope">
          <input type="text" v-model="scope.row.account" v-show="scope.row.iseditor" />
          <span v-show="!scope.row.iseditor">{{scope.row.account}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="书名" width="150px">
        <template slot-scope="scope">
          <input type="text" v-model="scope.row.name" v-show="scope.row.iseditor" />
          <span v-show="!scope.row.iseditor">{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="author" label="作者" width="150px">
        <template slot-scope="scope">
          <input type="text" v-model="scope.row.author" v-show="scope.row.iseditor" />
          <span v-show="!scope.row.iseditor">{{scope.row.author}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="publisher" label="出版商" width="150px">
        <template slot-scope="scope">
          <input type="text" v-model="scope.row.publisher" v-show="scope.row.iseditor" />
          <span v-show="!scope.row.iseditor">{{scope.row.publisher}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="ISBN" label="ISBN" width="150px">
        <template slot-scope="scope">
          <input type="text" v-model="scope.row.ISBN" v-show="scope.row.iseditor" />
          <span v-show="!scope.row.iseditor">{{scope.row.ISBN}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="定价" width="150px">
        <template slot-scope="scope">
          <input type="text" v-model="scope.row.price" v-show="scope.row.iseditor" />
          <span v-show="!scope.row.iseditor">{{scope.row.price}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="introduction" label="内容简介" width="1000px">
        <template slot-scope="scope">
          <input type="text" v-model="scope.row.introduction" v-show="scope.row.iseditor" />
          <span v-show="!scope.row.iseditor">{{scope.row.introduction}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width=260px fixed="right">
        <template slot-scope="scope">
          <el-button @click="edit(scope.row, scope)">编辑</el-button>
          <el-button type="warning" @click="save(scope.row)">保存</el-button>
          <el-button type="danger" @click="save(scope.row, scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

</template>

<script>
export default {
  name: "Book-admin",
  data() {
    return {
      tableData: [{
        account: '123456',
        name: '王小虎',
        author: '啊速度快',
        publisher: '啊实打实多',
        ISBN:'123456',
        price:'12',
        introduction:'阿萨德哈减肥哈司法hi啊付红',
        iseditor: false,
      }, {
        account: '1234565',
        name: '王小虎阿萨德',
        author: '啊速度快阿萨德',
        publisher: '啊实打实多阿萨德',
        ISBN:'1234567',
        price:'12',
        introduction:'阿萨德哈减肥哈司阿萨德法hi啊付红',
        iseditor: false,
      }],
      search: ''
    }
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    edit(row, index) {
      row.iseditor = true;
    },
    save(row, index) {
      row.iseditor = false;
    },
    delete(row,index){
      row.iseditor=true;
    }
  },
}
</script>

<style scoped>
.table-wrapper{
  position: relative;
  margin: 6% 0 auto 0;

}
.table-wrapper /deep/  .el-table,
.el-table__expanded-cell {
  background-color: transparent !important;
}
.table-wrapper /deep/ tr, .table-wrapper /deep/ th, .table-wrapper /deep/ td {
  background: #1439391c !important;
  color:#fff;
  border-bottom: 0px;
}
.table-wrapper /deep/  .el-table tbody tr:hover>td {
  background-color: #367f7f78 !important
}
.table-wrapper /deep/ .el-table__row {
  background: #1439391c !important;
  color: #46d4ff;
}
.input-with-select /deep/ .el-input__inner {
  background-color: rgba(0, 0, 0, 0) !important;
}
.table-wrapper /deep/ .el-table__fixed {
  background: linear-gradient(to right, rgba(99, 97, 98, 0.95), #131313) !important;
}
.table-wrapper /deep/ .el-table__fixed-right{
  background: linear-gradient(to left, rgba(99, 97, 98, 0.95), #131313) !important;
}

</style>
